<form #fileUpdateForm="ngForm" novalidate (ngSubmit)="save()">
    <div class="modal-header">
        <h4 class="modal-title">
            <span *ngIf="options?.id">{{options?.title}}</span>
        </h4>
        <span class="pull-right">
            <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                <i aria-hidden="true" class="bi bi-x"></i>
            </button>
        </span>

    </div>
    <div class="modal-body" [busyIf]="loading">
        <div class="form-group form-md-line-input form-md-floating-label no-hint margin-top-10">
            <label>{{'Title' | localize}}</label>
            <input type="text" class="form-control" name="title" [ngClass]="{'edited':data.title}"
                [(ngModel)]="data.title" maxlength="256">
        </div>
        <single-upload-edit exNames="{{config?.exNames}}" maxSize="{{config?.maxSize}}"
            description="{{config?.description}}" [(picurl)]="data.fileUrl" exName="{{getExName(data.fileUrl)}}"
            label="{{config?.name | localize}}" customKey="{{options?.customKey}}" uploadType="{{uploadType}}"
            isPreviewImg="false" alias="{{config?.alias}}" canEdit="true"></single-upload-edit>

        <single-upload-edit *ngIf="config?.needThumbnail" exNames="{{config?.thumbnailExNames}}"
            maxSize="{{config?.thumbnailMaxSize}}" description="{{config?.thumbnailDescription}}"
            [(picurl)]="data.preViewImgUrl" exName="{{getExName(data.preViewImgUrl)}}"
            label="{{config?.thumbnailName | localize}}" customKey="{{options?.customKey}}" uploadType="{{uploadType}}"
            isPreviewImg="true" alias="{{config?.alias}}" canEdit="true" canRemove="true">
        </single-upload-edit>

        <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf='false'>
            <label>ALT</label>
            <input type="text" name="alt" class="form-control" [ngClass]="{'edited':data.alt}" [(ngModel)]="data.alt"
                maxlength="512">
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <label>{{'Description' | localize}}</label>
            <textarea class="form-control" name="description" [ngClass]="{'edited':data.description}" rows="3"
                [(ngModel)]="data.description" maxlength="3072"></textarea>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="false">
            <label>{{'CustomLink' | localize}}</label>
            <textarea class="form-control" name="linkUrl" [ngClass]="{'edited':data.linkUrl}" rows="3"
                [(ngModel)]="data.linkUrl" maxlength="256"></textarea>
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf='false'>
            <label>{{'Source' | localize}}</label>
            <input type="text" class="form-control" name="source" [ngClass]="{'edited':data.source}"
                [(ngModel)]="data.source" maxlength="256">
        </div>
        <div class="row" *ngIf="isMultiply">
            <div class="col-sm-6">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'Order' | localize}}</label>
                    <input type="number" name="order" class="form-control edited" ng-model="data.order">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="checkbox-list">
                    <div class="form-group">
                        <label for="file_isActive" class="checkbox">
                            <input id="file_isActive" type="checkbox" name="file_isActive" [(ngModel)]="data.isActive">
                            <span></span>
                            {{"ReleaseState" | localize}}
                        </label>
                    </div>
                    <div class="form-group" *ngIf="dataSynchronous">
                        <label for="file_autoSynchronous" class="checkbox">
                            <input id="file_autoSynchronous" type="checkbox" name="file_autoSynchronous"
                                [(ngModel)]="data.autoSynchronous">
                            <span></span>
                            {{"AutoSynchronous" | localize}}
                        </label>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button [disabled]="saving" type="button" class="btn btn-light-primary font-weight-bold" (click)="close()">
            {{"Cancel" | localize}}
        </button>
        <button type="submit" class="btn btn-primary font-weight-bold" [disabled]="!fileUpdateForm.form.valid || saving"
            [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
            <i class="fa fa-save"></i> <span>{{"Save" | localize}}</span>
        </button>
    </div>
</form>